<template>
  <view>
    <image :src="arrs[index]"/>
  </view>
  <button type="primary" :disabled="false" @click="index.value++">按钮</button>
  <view class="box" :class="{active: isActive}">
    v-bind 指令
  </view>
  <!-- <view class="box" :class="isActive ? 'active' : ''"></view> -->
   <view class="box" :style="{width: '300px', height: 260 + 'px', fontSize: size + 'px'}">内联样式</view>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(true);
let index = ref(0);
const size = ref(20);
const arrs = ref(['../../static/pic1.png', '../../static/pic2.png', '../../static/pic3.webp', '../../static/pic4.jpg']);

setInterval(() => {
  index.value++;
  if (index.value >= arrs.value.length) {
    index.value = 0;
  }
  isActive.value = !isActive.value;
  size.value = size.value + 1;
}, 1000);
</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  font-size: 20px;
}
.active {
  background-color: blue;
  color: white;
}
</style>
